
import React, { useState } from "react";
import { Checkbox, Table } from 'antd';
import styles from "../style/authority.module.scss"
/**@description 菜单配置 */


/**
 * @description 权限配置
 * @returns 
 */
const AuthorityConfig = ({ menuConfig = {}, setKeyCodeList, keyCodeList }) => {

    /**@description 返回所有下属子节点的key [] */
    const getChildrenKeys = (object, checked) => {
        // console.log("自己节点：", object)
        let allKeyList = [];
        const filter = (list) => {
            for (let i = 0; i < list.length; i++) {
                const item = list[i];
                const { children = [], authorityList = [] } = item;
                allKeyList.push(...authorityList.map(item => item.permissionMark))
                if (children && children.length > 0) {
                    filter(children);
                }
            }
        }
        filter([object])
        return allKeyList;
    }



    //onClick allSelectButton
    const onChangeAllKey = (checked, record) => {
        const keyList = getChildrenKeys(record);
        if (checked) {
            const newButtonList = [...keyCodeList, ...keyList];
            setKeyCodeList([...new Set(newButtonList)])
        } else {
            let arr = [...keyCodeList];
            arr = keyCodeList.filter(item => keyList.includes(item) === false)
            setKeyCodeList(arr);
        }
    }

    // check all Selected?
    const CheckAllSelected = (record) => {

        const keyList = getChildrenKeys(record);  //['13', '0035', '0036', '0037', '0038']
        let check = true;
        for (let i = 0; i < keyList.length; i++) {
            const permissionMark = keyList[i];
            if (permissionMark === record.permissionMark) continue;
            if (keyCodeList.includes(permissionMark) === false) {
                check = false;
                break;
            }
        }
        // console.log("自动检测是否全选?", check);

        // onChangeSelected(check, {}, { key: record.key })
        return check;
    }




    // one check change
    const onChangeSelected = (chedkedVal, record, detail) => {
        const { permissionMark: detailKey } = detail;
        if (chedkedVal === true) {
            //add
            setKeyCodeList([...keyCodeList, detailKey])
        } else {
            //remove
            let newList = keyCodeList.filter(item => item !== detailKey)
            setKeyCodeList(newList)
        }
    }

    // 子节点是否全选
    const indeterminate = (record) => {
        const childrenKeys = getChildrenKeys(record).filter(item => item.permissionMark !== record.permissionMark);
        const checkedChildrenKeys = keyCodeList.filter(permissionMark => childrenKeys.includes(permissionMark) === true)
        return checkedChildrenKeys.length > 0 && checkedChildrenKeys.length < childrenKeys.length;
    }



    const columns = [

        {
            title: '操作对象',
            dataIndex: 'menuName',
            width: 300
        },
        {

            title: '权限配置',
            dataIndex: 'authorityList',
            render: (list, record) => {
                if (list && list.length > 0) {
                    return (
                        list.map((detail, key) => <Checkbox
                            className={styles.check}
                            key={key}
                            onChange={(e) => onChangeSelected(e.target.checked, record, detail)}
                            checked={keyCodeList.includes(detail.permissionMark) ? true : false}
                            size="small"
                        >{detail.menuName}</Checkbox>)
                    )
                } else {
                    return null;
                }
            }

        },
        {
            title: '操作',
            dataIndex: 'action',
            width: 100,
            render: (text, record) => {
                return <Checkbox
                    checked={CheckAllSelected(record)}
                    indeterminate={indeterminate(record)}
                    onChange={(e) => onChangeAllKey(e.target.checked, record)}
                />
            }
        },
    ];


    const tableProps = {
        columns,
        dataSource: menuConfig,
        pagination: false,
        size: "small",
        defaultExpandAllRows: true
    }

    return (
        <>
            <Table {...tableProps}
                rowKey={"permissionMark"}
            />
        </>
    )
}
export default AuthorityConfig;